import React, { Component } from 'react'
import '../css/style.css'
import { HashRouter, Switch, Route, Link } from 'react-router-dom'
import One from './home/one'
import Two from './home/two'
import Three from './home/three'
import Four from './home/four'
import Five from './home/five'
import Six from './home/six'
import Seven from './home/seven'
import Eight from './home/eight'


class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            list: JSON.parse(localStorage.getItem('login')) || [],
            item: '',
        }
    }
    componentDidMount() {
        // var item = JSON.parse();
        // console.log(item);
        // if (item !== {}) {
        //     this.state.list = item;
        //     localStorage.setItem('login', JSON.stringify(item));
        //     this.setState({
        //         list: this.state.list
        //     })
        // } else {
        //     this.state.list = JSON.parse(localStorage.getItem('login')) || []
        //     this.setState({
        //         list: this.state.list,
        //     })
        // }
        console.log(this.props);
        console.log(this.state.list);
        if (this.state.list.length == 0) {
            console.log(111);
            document.getElementsByClassName('b')[0].style.display = 'none'
            document.getElementsByClassName('a')[0].style.display = 'flex'
        } else {
            console.log(222);
            document.getElementsByClassName('a')[0].style.display = 'none'
            document.getElementsByClassName('b')[0].style.display = 'flex'
        }
    }
    componentDidUpdate() {
        console.log(this.props);
    }
    render() {
        return (
            <div className='home_container'>
                <header>
                    <div>
                        <ul>
                            <li>小米商城</li><i>|</i>
                            <li>MIUI</li><i>|</i>
                            <li>IoT</li><i>|</i>
                            <li>云服务</li><i>|</i>
                            <li>天星科技</li><i>|</i>
                            <li>有品</li><i>|</i>
                            <li>小爱开放平台</li><i>|</i>
                            <li>企业团购</li><i>|</i>
                            <li>资质证照</li><i>|</i>
                            <li>协议规则</li><i>|</i>
                            <li>下载app</li><i>|</i>
                            <li>智能生活</li><i>|</i>
                            <li>Select Location</li>
                        </ul>
                        <ul className='a'>
                            <li onClick={() => {
                                this.props.history.push('/login')
                            }}>登录</li><i>|</i>
                            <li>注册</li><i>|</i>
                            <li>消息通知</li>
                            <div>购物车(0)</div>
                        </ul>
                        <ul className='b'>
                            <li onClick={() => {
                                localStorage.removeItem('login')
                                document.getElementsByClassName('b')[0].style.display = 'none'
                                document.getElementsByClassName('a')[0].style.display = 'flex'
                            }}>账号:{this.state.list}</li><i>|</i>
                            <li>消息通知</li>
                            <div>购物车(0)</div>
                        </ul>
                    </div>
                </header>
                <main>
                    <div className='home_header'>
                        <div>
                            <img src='1.png' />
                            <ul>
                                <li>全部商品分类</li>
                                <li>小米手机</li>
                                <li>Redmi 红米</li>
                                <li>电视</li>
                                <li>笔记本</li>
                                <li>家电</li>
                                <li>路由器</li>
                                <li>智能硬件</li>
                                <li>服务</li>
                                <li>社区</li>
                            </ul>
                            <div>
                                <input placeholder='小米手机' />
                                <span>
                                    <img src='2.png' />
                                </span>
                            </div>
                        </div>
                    </div>
                    <div className='home_content'>
                        <div>
                            <p>首页 / 关于小米{` / ${this.state.item}`}</p>
                            <ul>
                                <Link to='/' onClick={() => {
                                    this.state.item = ''
                                }}>公司简介</Link><i>|</i>
                                <Link to='one' onClick={() => {
                                    console.log(this.refs.one.innerHTML);
                                    this.state.item = this.refs.one.innerHTML
                                }} ref='one'>管理团队</Link><i>|</i>
                                <Link to='/two' onClick={() => {
                                    console.log(this.refs.one.innerHTML);
                                    this.state.item = this.refs.two.innerHTML
                                }} ref='two'>小米文化</Link><i>|</i>
                                <Link to='/three' onClick={() => {
                                    console.log(this.refs.one.innerHTML);
                                    this.state.item = this.refs.three.innerHTML
                                }} ref='three'>发展经历</Link><i>|</i>
                                <Link to='/four' onClick={() => {
                                    console.log(this.refs.one.innerHTML);
                                    this.state.item = this.refs.four.innerHTML
                                }} ref='four'>小米新闻</Link><i>|</i>
                                <Link to='/five' onClick={() => {
                                    console.log(this.refs.one.innerHTML);
                                    this.state.item = this.refs.five.innerHTML
                                }} ref='five'>加入小米</Link><i>|</i>
                                <Link to='/six' onClick={() => {
                                    console.log(this.refs.one.innerHTML);
                                    this.state.item = this.refs.six.innerHTML
                                }} ref='six'>投资者关系</Link><i>|</i>
                                <Link to='/seven' onClick={() => {
                                    console.log(this.refs.one.innerHTML);
                                    this.state.item = this.refs.seven.innerHTML
                                }} ref='seven'>联系我们</Link>
                            </ul>
                            <div className='item'>
                                <HashRouter>
                                    <Switch>
                                        <Route path='/one' component={One} />
                                        <Route path='/two' component={Two} />
                                        <Route path='/three' component={Three} />
                                        <Route path='/four' component={Four} />
                                        <Route path='/five' component={Five} />
                                        <Route path='/six' component={Six} />
                                        <Route path='/seven' component={Seven} />
                                        <Route path='/' component={Eight} />
                                    </Switch>
                                </HashRouter>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        )
    }
}

export default Home;